<template>
  <div>
    <form action="">

      <div class="weui-cells__title">使用手机登录</div>
      <div class="weui-cells weui-cells_after-title">
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <input v-model="phone" type="number" placeholder="手机号">
          </div>
        </div>
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <input v-model="password" type="password" placeholder="密码">
          </div>
        </div>

      </div>
      <button class="btn" type="primary" :loading="loading" @click="handleLogin">登陆</button>
      <navigator url="/pages/signup/main"><a class="btn" href="#">注册</a></navigator>
      <div class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
        <div class="weui-loadmore__tips weui-loadmore__tips_in-line weui-loadmore__tips_in-dot"></div>

      </div>

      <div class="weui-loadmore" @click="handleLoginWithWx">
        <div style="marign-botton: 8px;">
          <image :src="CDN + '/static/images/wx.png'" style="width: 64px; height: 64px; padding-botton: 4px;" />
        </div>
      </div>
      <div class="weui-loadmore__tips weui-loadmore__tips_in-line tips">使用微信登录&nbsp;&nbsp;&nbsp;&nbsp;</div>
    </form>
  </div>
</template>

<script>
import { isMobilePhone } from 'validator'

import AuthenticateUserMutation from '@/graphql/AuthenticateUserMutation.graphql'

export default {
  data () {
    return {
      CDN: this.$CDN,
      loading: false,
      phone: '',
      password: ''
    }
  },

  methods: {
    handleLogin () {
      if (!this.phone || !isMobilePhone(this.phone, 'zh-CN')) {
        wx.showToast({
          icon: 'none',
          title: '请输入正确的手机号码'
        })
        return false
      }
      if (!this.password) {
        wx.showToast({
          icon: 'none',
          title: '请输入密码'
        })
        return false
      }
      /* this.$apollo.mutate({
        mutation: AuthenticateUserMutation,
        variables: {
          phone: this.phone,
          password: this.password
        }
      })
        .then(result => {
          console.log(result)
          wx.setStorageSync('token', result.data.login.token)
          wx.setStorageSync('user', result.data.login.user)
          const url = `../index/main`
          wx.reLaunch({ url })
        })
        .catch(error => {
          console.log(error)
          wx.showToast({
            icon: 'none',
            title: '账号密码错误, 请重试'
          })
          return false
        }) */

      this.$apollo.mutateLoading({
        mutation: AuthenticateUserMutation,
        variables: {
          phone: this.phone,
          password: this.password
        }
      }, result => {
        // console.log(result)
        wx.setStorageSync('token', result.data.login.token)
        wx.setStorageSync('user', result.data.login.user)
        const url = `../index/main`
        wx.reLaunch({ url })
      }, () => {
        // console.log(error)
        wx.showToast({
          icon: 'none',
          title: '账号密码错误, 请重试'
        })
        return false
      })
    },
    handleLoginWithWx () {
      this.$promiseify('login')
        .then(result => {
          console.log(result)
          return result.code
        })
        .then(code => {
          /* this.$promiseify('request', {
            url: process.env.CODE_2_SESSION,
            data: {
              appid: process.env.APP_ID,
              secret: process.env.APP_SECRET,
              js_code: code,
              grant_type: 'authorization_code'
            }
          })
            .then(result => {
              console.log(result)
              this.$apollo.mutate({
                mutation: AuthenticateUserMutation,
                variables: {
                  openid: result.data.openid
                }
              })
                .then(result => {
                  console.log(result)
                  wx.setStorageSync('token', result.data.login.token)
                  wx.setStorageSync('user', result.data.login.user)
                  const url = `../index/main`
                  wx.reLaunch({ url })
                })
                .catch(error => {
                  console.log(error)
                  const url = `../signup/main?openid=${result.data.openid}`
                  wx.navigateTo({ url })
                })
            })
            .catch(error => {
              console.log(error)
            }) */

          this.$apollo.mutateLoading({
            mutation: AuthenticateUserMutation,
            variables: {
              openid: code
            }
          }, result => {
            // console.log(result)
            wx.setStorageSync('token', result.data.login.token)
            wx.setStorageSync('user', result.data.login.user)
            const url = `../index/main`
            wx.reLaunch({ url })
          }, () => {
            // console.log(error)
            this.$promiseify('login')
              .then(result => {
                // console.log(result)
                return result.code
              })
              .then(code => {
                const url = `../signup/main?openid=${code}`
                wx.navigateTo({ url })
              })
              .catch(() => {
                // console.log(error)
                wx.showToast({
                  icon: 'none',
                  title: '微信账户登陆错误'
                })
              })
          })
        })
        .catch(() => {
          wx.showToast({
            icon: 'none',
            title: '微信账户登陆错误'
          })
        })
    }
  }
}
</script>

<style>
.btn {
  margin-top: 10px;
  text-align: center;
}
.tips {
  width: 100%;
  font-size: 12px;
  text-align: center;
}
</style>
